<template>
	<div class="system-dept-container layout-padding">
		<el-card shadow="hover" :body-style="{ paddingBottom: '0' }">
			<el-form :model="state.queryParams" ref="queryForm" :inline="true">
				<el-form-item label="机构名称">
					<el-input v-model="state.queryParams.name" placeholder="机构名称" clearable />
				</el-form-item>
				<el-form-item label="机构编码">
					<el-input v-model="state.queryParams.code" placeholder="机构编码" clearable />
				</el-form-item>
				<el-form-item>
					<el-button-group>
						<el-button type="primary" icon="ele-Search" @click="handleQuery"> 查询 </el-button>
						<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button>
					</el-button-group>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="ele-Plus" @click="openAddOrg"> 新增 </el-button>
				</el-form-item>
			</el-form>
		</el-card>
		<el-card class="full-table" shadow="hover" style="margin-top: 8px">
			<el-table
				:data="state.orgData"
				v-loading="state.loading"
				style="width: 100%"
				row-key="id"
				default-expand-all
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column prop="name" label="部门名称" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="code" label="部门编码" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="manager" label="负责人" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="phone" label="手机号码" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="email" label="邮箱" show-overflow-tooltip> </el-table-column>
				<el-table-column prop="orderNo" label="排序" width="70" align="center" show-overflow-tooltip />
				<!-- <el-table-column prop="status" label="部门状态" show-overflow-tooltip>
					<template #default="scope">
						<el-tag type="info" v-if="scope.row.status==1">禁用</el-tag>
						<el-tag type="success" v-else>启用</el-tag>
					</template>
				</el-table-column> -->
				<el-table-column prop="remarks" label="部门描述" show-overflow-tooltip></el-table-column>
				<el-table-column prop="createTime" label="创建时间" show-overflow-tooltip></el-table-column>
				<el-table-column label="操作" show-overflow-tooltip width="140">
					<template #default="scope">
						<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditOrg('edit',scope.row)"> 编辑 </el-button>
						<el-button icon="ele-Delete" size="small" text type="danger" @click="delOrg(scope.row)"> 删除 </el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<OrgDialog ref="orgDialogRef" :orgData="state.orgData" @refresh="handleQuery()" />
	</div>
</template>

<script setup lang="ts" name="systemOrg">
import { defineAsyncComponent, ref, reactive, onMounted } from 'vue';
import { RouteRecordRaw } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import { useOrgApi } from '/@/api/org';

// 引入组件
const OrgDialog = defineAsyncComponent(() => import('/@/views/system/org/dialog.vue'));

// 定义变量内容
const orgDialogRef = ref();
const state = reactive({
	orgData: [] as Array<OrgItem>,
	loading: false,
	queryParams:{
		name:'',
		code:''
	},
	editOrgTitle:'',
});

// 初始化表格数据
const handleQuery = async() => {
	state.loading = true;
	state.orgData = [];
	//state.tableData.data = [];
	// state.tableData.data.push({
	// 	deptName: 'vueNextAdmin',
	// 	createTime: new Date().toLocaleString(),
	// 	status: true,
	// 	sort: Math.random(),
	// 	describe: '顶级部门',
	// 	id: Math.random(),
	// 	children: [
	// 		{
	// 			deptName: 'IT外包服务',
	// 			createTime: new Date().toLocaleString(),
	// 			status: true,
	// 			sort: Math.random(),
	// 			describe: '总部',
	// 			id: Math.random(),
	// 		},
	// 		{
	// 			deptName: '资本控股',
	// 			createTime: new Date().toLocaleString(),
	// 			status: true,
	// 			sort: Math.random(),
	// 			describe: '分部',
	// 			id: Math.random(),
	// 		},
	// 	],
	// });
	//state.tableData.total = state.tableData.data.length;
	
		useOrgApi().getOrgList({ "title": state.queryParams.name, "code": state.queryParams.code }).then(async (res: AjaxResult) => {
		const _data: Array<OrgItem> = res.data;
		//console.log('ok-res:'+JSON.stringify(res.data));
		state.orgData = _data; //JSON.parse(JSON.stringify(res.data));
	});

	setTimeout(() => {
		state.loading = false;
	}, 500);
};
// 重置操作
const resetQuery = () => {
	state.queryParams.name = '';
	state.queryParams.code = '';
	handleQuery();
};
// 打开新增页面
const openAddOrg = (type : string) => {
	state.editOrgTitle = '添加机构';
	//console.log('添加');
	const _row : OrgForm = { status: 0, sortNum: 100 }
	orgDialogRef.value.openDialog(type, _row);
};
// 打开编辑页面
const openEditOrg = (type: string, row: RouteRecordRaw) => {
	//console.log('修改');
	state.editOrgTitle = '编辑机构';
	orgDialogRef.value.openDialog(type, row);
};
// 删除
const delOrg = (row: any) => {
	ElMessageBox.confirm(`确定删除机构：【${row.name}】?`, '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning',
	})
	.then(async () => {
		await useOrgApi().deleteOrg({ id: row.id }).then(async (res:AjaxResult) => {
			ElMessage.success('删除成功');
			handleQuery();
		});
		//await getAPI(SysOrgApi).apiSysOrgDeletePost({ id: row.id });
	})
	.catch(() => { });
};



// // 打开新增菜单弹窗
// const onOpenAddDept = (type: string) => {
// 	deptDialogRef.value.openDialog(type);
// };
// // 打开编辑菜单弹窗
// const onOpenEditDept = (type: string, row: DeptTreeType) => {
// 	deptDialogRef.value.openDialog(type, row);
// };
// // 删除当前行
// const onTabelRowDel = (row: DeptTreeType) => {
// 	ElMessageBox.confirm(`此操作将永久删除部门：${row.deptName}, 是否继续?`, '提示', {
// 		confirmButtonText: '删除',
// 		cancelButtonText: '取消',
// 		type: 'warning',
// 	})
// 		.then(() => {
// 			getTableData();
// 			ElMessage.success('删除成功');
// 		})
// 		.catch(() => {});
// };
// 页面加载时
onMounted(() => {
	handleQuery();
});
</script>